<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置为红色

            元素选择器
                语法：标签名{}
                列子： p{}  h1{}
        */
        /*
             p{
                 color:brown;
            }
         */

        /* 
            将其中一句变为蓝色

            id选择器
                作用：根据元素的Id属性值选中一个元素
                语法：#id属性值{}
                例子：#box{}
        */
        #blue{
            color:blue;
        }
        

        /* 
            将多句设置为绿色

            类选择器(主要使用)
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值
        */
        .green{
            color: green;
        }
        .abc{
            font-size: 20px;
        }
        /* 
            通配选择器
                作用：选择页面中所有的元素
                语法：*
        */



    </style>
</head>
<body>
    <p>少校</p>
    <p id="blue">挨打</p>
    <!-- 
        class 是一个标签的属性，它和Id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
     -->
    <p class="green abc">大大</p>
    <p class="green">我的</p>
</body>
</html>